<template>
  <info-window
    class="info-window"
    info-width="350px"
    info-height="100%"
    header-align="center"
    header-title="问题信息"
  >
    <el-descriptions
      :column="1"
      border
    >
      <el-descriptions-item label="标题">
        {{ model.orderTitle || "" }}
      </el-descriptions-item>
      <el-descriptions-item label="编号">
        {{ model.orderNum || "" }}
      </el-descriptions-item>
      <el-descriptions-item label="类型">
        {{ model.orderTypeName || "" }}
      </el-descriptions-item>
      <el-descriptions-item label="所属应用">
        {{ model.appName || "" }}
      </el-descriptions-item>
      <el-descriptions-item label="发起人">
        {{ model.initiatorName || "" }}
      </el-descriptions-item>
      <el-descriptions-item label="发起时间">
        {{ model.initiatorTime || "" }}
      </el-descriptions-item>
      <el-descriptions-item label="期望完成时间">
        {{ model.expectFinishTime || "" }}
      </el-descriptions-item>
      <el-descriptions-item label="上一处理人">
        {{ model.lastProcessorName || "" }}
      </el-descriptions-item>
      <el-descriptions-item label="上一处理时间">
        {{ model.lastProcessorTime || "" }}
      </el-descriptions-item>
      <el-descriptions-item label="完成时间">
        {{ model.finishTime || "" }}
      </el-descriptions-item>
    </el-descriptions>
  </info-window>
</template>

<script>
import InfoWindow from "@/components/mainEntrance/info-window/index.vue";

export default {
  name: "OrderInfo",
  components: {
    InfoWindow
  },
  props: {
    model: {
      type: Object,
      default: () => ({})
    }
  }
};
</script>

<style lang="less" scoped>
/deep/ .el-descriptions {
  margin: 20px;

  td {
    position: relative;

    &::before {
      content: " ";
      position: absolute;
      left: 0;
      top: 0;
      width: 200%;
      height: 200%;
      border: 1px solid var(--light-blue-color);
      border-bottom: none;
      transform-origin: 0 0;
      transform: scale(0.5);
    }
  }

  th {
    position: relative;

    &::before {
      content: " ";
      position: absolute;
      left: 0;
      top: 0;
      width: 200%;
      height: 200%;
      border: 1px solid var(--light-blue-color);
      border-bottom: none;
      border-right: none;
      transform-origin: 0 0;
      transform: scale(0.5);
    }
  }

  & tbody:nth-last-child(1) {
    td::before {
      border-bottom: 1px solid var(--light-blue-color);
    }

    th::before {
      border-bottom: 1px solid var(--light-blue-color);
    }
  }

  .el-descriptions-item__cell {
    border: none !important;
    max-width: 225px;
  }

  .el-descriptions__body {
    background-color: transparent;
    color: var(--form-text);

    .el-descriptions-item__label {
      color: var(--form-text);
      background-color: transparent;
    }
  }
}
</style>